<template>
  <div class="did-h">
    <div class="black black-h">
      <div>通过DID查询该DID信息。</div>
      <el-row :gutter="20" class="mt3">
        <el-col :span="10" :offset="6">
          <el-form label-position="right" label-width="80px" :model="form">
            <el-form-item label="DID">
              <el-input v-model="form.did" placeholder="请输入已注册的DID"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div class="did-button">
        <el-button size="medium" type="primary" @click="queryingDid">查询DID</el-button>
      </div>
    </div>
    <div class="black mt1 black-height" >
          <ul>
            <li class="publicKey">
              <span class="span">DID：</span>
              <span class="span-key">{{ data.id }}</span>
            </li>
            <li class="publicKey">
              公钥集合
            </li>
            <li>
              <span class="span-key" v-if="data.publicKey">
                <el-table :data="data.publicKey" style="width: 100%">
                     <el-table-column prop="id" label="公钥ID" > </el-table-column>
                     <el-table-column prop="publicKey" label="公钥"></el-table-column>
                     <el-table-column prop="owner" label="拥有者"></el-table-column>
                     <el-table-column prop="type" label="类型" width="100px"></el-table-column>
                     <el-table-column prop="revoked" label="是否已撤销" width="100px">
                        <template slot-scope="scope">
                          {{scope.row.revoked!=null?scope.row.revoked==true?'是':'否':''}}
                        </template>
                     </el-table-column>
                </el-table>
              </span>
            </li>
            <li class="publicKey">
              身份验证集合
            </li>
            <li>
              <span class="span-key" v-if="data.authentication">
                <el-table :data="data.authentication" style="width: 100%">
                     <el-table-column prop="publicKey" label="公钥"></el-table-column>
                     <el-table-column prop="type" label="类型" width="100px"></el-table-column>
                     <el-table-column prop="revoked" label="是否已撤销" width="100px">
                        <template slot-scope="scope">
                          {{scope.row.revoked!=null?scope.row.revoked==true?'是':'否':''}}
                        </template>
                     </el-table-column>
                </el-table>
              </span>
            </li>
              <li class="publicKey">
                 服务集合
              </li>
            <li>
              <span class="span-key" v-if="data.service">
                <el-table :data="data.service" style="width: 100%">
                     <el-table-column prop="serviceEndpoint" label="服务端点"></el-table-column>
                     <el-table-column prop="type" label="类型" width="200px"></el-table-column>
                </el-table>
              </span>
            </li>
          </ul>

    </div>
  </div>
</template>
<script>
import NoData from '../../../components/noData.vue';
export default {
  components: {
    NoData,
  },
  data() {
    return {
      activeName: 'first',
      form: {
        did:'',
      },
      data:{
        publicKey:'',
        service:'',
        authentication:'',
        updated:'',
        created:'',
        id:''
      },
    };
  },
  
  mounted() {},
  methods: {
    async queryingDid(){
      let res = await this.$http.post(this.$api.did.queryingDid,this.form);
      if (res.code == 200) {
        this.data = res.data;
        // this.data.publicKey = res.data.publicKey[0].publicKey;
        // this.data.authentication = res.data.authentication[0].publicKey;
        // for(let key in res.data.authentication){
        //     this.data.authentication = key;
        // }
        // if(res.data.authentication.length>0){
        //    this.data.authentication = res.data.authentication[0].studyingCardService;
        // }
        // if(res.data.service.length>0){
        //    this.data.service = res.data.service[0].studyingCardService;
        // }
        // this.data.id = res.data.id;
        // this.data.created = res.data.created;
        // this.data.updated = res.data.updated;
        
      }

    }
  },
};
</script>
<style lang="less" scoped>
.did-content {
  margin-top: 10%;
  h1 {
    color: #666666;
    width: 320px;
    margin: 0 auto;
  }
}
.did-button {
  width: 100px;
  margin: 0 auto;
  margin-top: 20px;
}
.m-a0 {
  margin: 0 auto;
}
.black-h {
  height: 50%;
}
.black-height {
  height: calc(50% - 90px);
  overflow-y: auto;
}
.nodata {
  margin-top: 10%;
}
.did-width {
  width: 500px;
  margin: 0 auto;
}
.black-height ul{
  width: 90%;
  margin: 0 auto;
}
.publicKey {
  display: flex;
  line-height: 30px;
  .span {
    width: 180px;
  }
  .span-key {
    width: calc(100% - 260px);
    word-break: break-word;
    white-space: pre-line;
  }
}
</style>
